<template>
	<view class="m-bg-n">
		<wode-dengji :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap"></wode-dengji>
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{ height: swiperheight + 'px' }" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items, index) in tabBars" :key="index">
					<scroll-view scroll-y="true" class="list">
						<template>
							<!-- 内容 -->
							<scroll-view scroll-y="true" class="list">
								<view class="u-m-l-30 u-m-r-30 u-radio">
									<view class="m-br-10">
										<u--image width="100%" height="170" mode="aspectFill" radius="5"
											:src="index == 0 ? oss + '/mine/fed.png' : index == 1 ? oss + '/mine/lv.png' : oss + '/mine/huang.png'">
										</u--image>
										<view class="t-rong u-abso">
											<view class="m-c-w m-font-b">
												{{ index === 0 ? '团员' : index === 1 ? '高级团长' : '明星团长' }}
											</view>
											<view
												class="u-flex u-flex-between u-flex-items-center u-font-29 m-c-w u-m-t-100">
												<view class="u-flex-1">
													{{ index === 0 ? '达标任务 : 注册内当家用户' : index === 1 ? '达标任务 : 邀请5名粉丝下载注册' : '推荐粉丝成功购买享受5000元奖励' }}
												</view>
												<!-- <view v-if="index === 0">{{ userInfo.level == 1 ? '已完成' : '未完成' }}</view> -->
												<view v-if="index === 0">已完成</view>
												<view v-if="index === 1">{{ userInfo.level == 2 ? '已完成' : '未完成' }}
												</view>
												<view v-if="index === 2">{{ userInfo.level == 3 ? '已完成' : '未完成' }}
												</view>
											</view>
										</view>
									</view>
									<!-- 去升级高级团员 -->
									<view class="u-m-t-30" v-if="index === 0" @click="nextNav('/pages/mine/erwei')">
										<u--image class="u-radio" width="100%" height="80" mode="aspectFill" radius="5"
											:src="oss + '/mine/de.png'"></u--image>
										<view class="u-flex u-flex-items-center u-flex-end z-t-c u-abso">
											<view class="w-zi-c">
												<text>去升级高级团员</text>
												<text class="u-font-35 m-font-b">-LV2</text>
											</view>
											<view>
												<u--image width="50" height="50" :src="oss + '/mine/go.jpg'"></u--image>
											</view>
										</view>
									</view>

									<!-- 邀请领红包 -->
									<view class="t-m-bg u-m-t-30 u-p-t-20 u-p-b-20" v-if="index === 1">
										<u-steps>
											<u-steps-item v-for="(t, d) in list2" :key="d">
												<view class="slo-icon" :style="{ borderWidth: t.avatar ? '0' : '1rpx' }"
													slot="icon">
													<u--image v-if="t.avatar" :showLoading="true" :src="t.avatar"
														width="33" height="33" shape="circle"></u--image>
													<view v-else>{{ d + 1 }}</view>
												</view>
											</u-steps-item>
											<u-steps-item>
												<view class="slot-icon u-m-r-15" slot="icon"
													@click="nextNav('/pages/mine/erwei')">{{ huodong }}</view>
											</u-steps-item>
										</u-steps>
									</view>
									<view class="t-m-bg u-m-t-30 u-p-t-20 u-p-b-20" v-if="index === 2">
										<u-steps>
											<u-steps-item v-for="(t, d) in list3" :key="d">
												<view class="slo-icon" :style="{ borderWidth: t.avatar ? '0' : '1rpx' }"
													slot="icon">
													<u--image v-if="t.avatar" :showLoading="true" :src="t.avatar"
														width="33" height="33" shape="circle"></u--image>
													<view v-else>{{ d + 6 }}</view>
												</view>
											</u-steps-item>
											<u-steps-item>
												<view class="slot-icon u-m-r-15" slot="icon"
													@click="nextNav('/pages/mine/erwei')">{{ huodong }}</view>
											</u-steps-item>
										</u-steps>
									</view>

									<view class="t-m-bg u-m-t-30 u-m-b-30">
										<view class="u-flex u-flex-y-center u-p-30 m-c-w">
											<u-image width="4" height="22" :src="oss + '/mine/sdsf.png'"></u-image>
											<text class="u-m-l-15 u-font-40">达标团员权益</text>
										</view>

										<u-cell v-for="(item, ind) in listLa" :key="ind">
											<view slot="title"
												class="m-c-w u-flex u-flex-items-center u-flex-between u-font-30">
												<view class="u-flex u-flex-items-center">
													<u-icon size="22" :name="item.icon"></u-icon>
													<text class="u-m-l-20 u-font-32">{{ item.text }}</text>
												</view>
												<view v-if="ind === 0" class="ndj-or">
													￥{{ index == 0 ? item.jie : index == 1 ? item.jie1 : item.jie2 }}
												</view>
											</view>
											<view slot="label" class="u-m-t-30 u-m-l-60">
												<view v-for="(i, d) in item.list" :key="d">
													<text
														class="m-c-w l-h-g">{{ index == 0 ? i.title : index == 1 ? i.title1 : i.title2 }}</text>
												</view>
											</view>
										</u-cell>
									</view>

									<view class="u-flex u-flex-center u-m-t-40">
										<u-image mode="heightFix" height="50" src="/static/ico.png"></u-image>
									</view>
									<u-divider textColor="#FFF" textSize="13" text="最终解释权归本公司所有"></u-divider>
								</view>
							</scroll-view>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				huodong: '',
				list2: [{}, {}, {}, {}, {}],
				list3: [{}, {}, {}, {}, {}],
				tabIndex: 0, // 选中的
				swiperheight: 500, //高度
				tabBars: [{
						name: '团员',
						id: 'guanzhu'
					},
					{
						name: '高级团长',
						id: 'tuijian'
					},
					{
						name: '明星团长',
						id: 'tiyu'
					}
				],
				listLa: [{
						icon: 'https://neidangjia.oss-accelerate.aliyuncs.com/mine/ghh.png',
						text: '奖励服务',
						jie: '3000',
						jie1: '4000',
						jie2: '5000',
						list: [{
							title: '分享新用户（粉丝）注册内当家小程序或者下载内当家APP 推荐1 - 5 人成交购买， 即可获得每人3000元 / 套奖励 ',
							title1: '分享新用户（粉丝）注册内当家小程序或者下载内当家APP 推荐6-10人成交购买，即可获得每人4000元/套奖励',
							title2: '分享新用户（粉丝）注册内当家小程序或者下载内当家APP 推荐10以上人成交购买，即可获得每人5000元/套奖励'
						}]
					},
					{
						icon: 'https://neidangjia.oss-accelerate.aliyuncs.com/mine/as.png',
						text: '购房补贴',
						jie: '',
						list: [{
							title: '团员通过内当家APP购买，即享受内当家购房补贴服务，最高50万',
							title1: '团员通过内当家APP购买，即享受内当家购房补贴服务，最高50万',
							title2: '享受管家1V1咨询服务 享受看房专车接送服务 享受公司买贵赔付服务'
						}]
					},
					{
						icon: 'https://neidangjia.oss-accelerate.aliyuncs.com/mine/wrf.png',
						text: '管家服务',
						jie: '',
						list: [{
							title: '享受管家1V1咨询服务 享受看房专车接送服务 享受公司买贵赔付服务',
							title1: '团员通过内当家APP购买，即享受内当家购房补贴服务，最高50万',
							title2: '享受管家1V1咨询服务 享受看房专车接送服务 享受公司买贵赔付服务'
						}]
					}
				],
				userInfo: {}
			};
		},
		async onLoad() {
			let userInfo = uni.getStorageSync('userInfo');
			this.userInfo = JSON.parse(userInfo);

			let fensi = await this.require('getFans', {
				p: 1,
				pnum: this.pnum
			});
			if (fensi) {
				if (fensi.length < 6 && fensi.length > 0) {
					for (var i = 0; i < fensi.length; i++) {
						this.list2[i] = fensi[i];
					}
				} else if (fensi.length > 5) {
					for (var i = 5; i < fensi.length; i++) {
						this.list3[i] = fensi[i];
					}
				}
			}
			uni.getSystemInfo({
				success: res => {
					let height = res.windowHeight - uni.upx2px(100);
					this.swiperheight = height;
				}
			});
			let about = await this.require('getcompanyconfig');
			if (about) {
				this.huodong = about[9].value;
			}
		},
		methods: {
			//接受子组件传过来的值点击切换导航
			tabtap(index) {
				this.tabIndex = index;
			},
			//滑动切换导航
			tabChange(e) {
				this.tabIndex = e.detail.current;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.slot-icon {
		width: 100rpx !important;
		height: 100rpx !important;
		padding: 14rpx;
		border-radius: 100rpx;
		font-size: 24rpx;
		color: #276755;
		text-align: center;
		line-height: 28rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #dbb07b;
	}

	.slo-icon {
		width: 66rpx !important;
		height: 66rpx !important;
		border-radius: 66rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #dbb07b;
		text-align: center;
		line-height: 58rpx;
		border: 1rpx dashed #dbb07b;
		background-color: #5a927f;
	}

	.m-bg-n {
		min-height: 100vh;
		background: linear-gradient(#0e5642, rgba(14, 86, 66, 0.9) 10%, #2a886e 40%, #2a886e 100%);
	}

	.t-rong {
		width: 690rpx;
		top: 0;
		padding: 30rpx;
		font-size: 48rpx;
	}

	.u-m-t-100 {
		margin-top: 170rpx;
	}

	.z-t-c {
		color: #4450a9;
		top: 400rpx;
		right: 50rpx;
	}

	.w-zi-c {
		margin-right: 30rpx;
	}

	.t-m-bg {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: rgba(255, 255, 255, 0.1);
	}

	.list {
		height: calc(100vh - (130rpx));
	}

	.ndj-or {
		color: #dbb07b;
	}

	.l-h-g {
		line-height: 60rpx;
	}
</style>
